<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>10-样式优先级-03</title>
    <style>
	*{margin:0;padding:0;}
	#box{width:300px;height:300px;border:1px solid red;border-radius:150px;margin:100px auto;background:url("../images/瓶子.jpg ");overflow:hidden;animation:divscale 10s linear infinite;}
	#box .box1{display:none;width:300px;height:300px;border-radius:150px;background-color:rgba(3,3,3,.2);text-align:center;color:#fff;font-weight:bold;}
	#box .box1 .p-1{padding-top:100px;}
	#box .box1 .p-2{padding-top:30px;}
	#box:hover .box1{display:block;}
	#box:hover{background:url("../images/乌拉.png");background-size:cover;background-repeat: no-repeat;}

	@-webkit-keyframes divscale{
		0%{
			transform:rotate(0deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
	/*border,float,absolute,fixed,overflow会阻止外边距合并*/
  </style>
 </head>
 <body>
	<div id="box">
		<div class="box1">
				<p class="p-1">33</p>
				<p class="p-2">不要被骄傲遮蔽了双眼</p>			
		</div>
	</div>
 </body>
</html>
